<template>
  <Checkbox v-model="treeMenuStatus" @on-change="exchangeTree">全部展开/收起</Checkbox>
  <Checkbox v-model="checkStrictly">父子联动</Checkbox>
  <Tree ref="treeRef" :data="treeData" show-checkbox multiple expand-node :check-strictly="!checkStrictly"></Tree>
</template>

<script setup>

import {getCurrentInstance, reactive, ref} from "vue";
import {MenuService} from "@/api/menu";
import {menuArrayToTree} from "@/api/utils";
import {RoleService} from "@/api/role";

const {proxy} = getCurrentInstance();

const treeData = ref([])

const treeMenuStatus = ref(true);

const roleId = ref('');

const roleMenuId = ref([]);

const checkStrictly = ref(false);

const setTreeData = async () => {
  const {data} = await MenuService.GetMenuList();
  const topMenuData = {title: '顶级', value: 0, children: []};
  topMenuData.children = menuArrayToTree(data.data, 0);
  treeData.value.push(topMenuData)
  await getGrantAuth();
  exchangeTree();
}

const exchangeTree = () => {
  console.log(treeMenuStatus.value)
  treeChangeExpand(treeData.value, treeMenuStatus.value)
  !!treeMenuStatus.value;
}


// 递归处理子节点展开
const treeChangeExpand = (data, flag) => {
  for (let i = 0; i < data.length; i++) {
    if (data[i].children) {
      treeChangeExpand(data[i].children, flag)
    }
    data[i].expand = flag;
  }
}

const getCheckedNodes = () => {
  let e = proxy.$refs.treeRef.getCheckedAndIndeterminateNodes();
  e.splice(0, 1)
  console.log(e);
}

const grantAuth = async () => {
  console.log(treeData.value)
  const e = proxy.$refs.treeRef.getCheckedAndIndeterminateNodes();
  if(!checkStrictly){
    e.splice(0,1);
  }
  console.log(e)
  const roleMenuData = [];
  for (const eElement of e) {
    roleMenuData.push({
      role_id: roleId.value,
      menu_id: eElement.value
    })
  }
  const param = {
    role_id: roleId.value,
    menu_ids: roleMenuData
  }

  const {data} = await RoleService.GrantRoleMenus(param);
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        window.location.reload();
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject();
      }
    })
  }
}

const getGrantAuth = async () => {
  const param = {
    role_id: roleId.value
  };
  const {data} = await RoleService.GetRoleMenus(param);
  if (data.code === 200) {
    data.data.forEach(e => {
      roleMenuId.value.push(e.menu_id)
    })
    console.log(roleMenuId.value)
    setDefaultTreeSelected(treeData.value)
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject()
      }
    })
  }
  console.log(data.data)
}

const setDefaultTreeSelected = (data) => {
  for (let i = 0; i < data.length; i++) {
    if (data[i].children) {
      setDefaultTreeSelected(data[i].children);
    }
    const roleMenuIdIndex = roleMenuId.value.findIndex(e => {
      return e === data[i].value
    })
    data[i].checked = !(roleMenuIdIndex === -1)
  }
}

defineExpose({
  setTreeData,
  roleId,
  grantAuth
})

</script>

<style scoped>

</style>
